<template>
  <d2-container better-scroll>
    <el-card shadow="never" class="d2-mb">
      <el-form
        class="filter-container"
        ref="searchData"
        :model="searchData"
        label-width="85px"
      >
        <el-row :gutter="20" style="height:30px">
          <el-col :span="4">
            <el-form-item label="商品">
              <el-select
                v-model="searchData.name"
                placeholder="请选择"
                filterable
                style="width:100%;"
                @change="handle_band"
                clearable
              >
                <el-option
                  v-for="item in selectNameList"
                  :key="item.name"
                  :label="item.name"
                  :value="item.name"
                >
                  <span style="float: left">{{ item.name }}</span>
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-form-item label="开始日期">
              <el-date-picker
                v-model="searchData.start_pub_date"
                type="date"
                placeholder="选择日期"
                style="width:100%;"
                value-format="yyyy-MM-dd"
                clearable
              >
              </el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-form-item label="结束日期">
              <el-date-picker
                v-model="searchData.end_pub_date"
                type="date"
                placeholder="选择日期"
                style="width:100%;"
                value-format="yyyy-MM-dd"
                clearable
              >
              </el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-form-item label="产地品牌">
              <el-select
                v-model="searchData.band"
                placeholder="请选择"
                filterable
                style="width:100%;"
                @change="handle_trader"
                clearable
              >
                <el-option
                  v-for="item in selectBandList"
                  :key="item.band"
                  :label="item.band"
                  :value="item.band"
                >
                  <span style="float: left">{{ item.band }}</span>
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-form-item label="报价方">
              <el-select
                v-model="searchData.trader"
                placeholder="请选择"
                filterable
                style="width:100%;"
                clearable
              >
                <el-option
                  v-for="item in selectTraderList"
                  :key="item.trader"
                  :label="item.trader"
                  :value="item.trader"
                >
                  <span style="float: left">{{ item.trader }}</span>
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="2">
            <el-button
              type="primary"
              size="mini"
              @click="search"
              style="margin-top:5px"
            >
              <d2-icon name="search" /> 查询
            </el-button>
          </el-col>
        </el-row>
      </el-form>
    </el-card>
    <div class="mb">
      <el-button type="default" size="mini" @click="searchHis">
        <d2-icon name="search" />
        历史行情
      </el-button>
      <el-button type="default" size="mini">
        <d2-icon name="upload" />
        导出
      </el-button>
    </div>
    <el-card shadow="never" class="d2-mb">
      <template slot="header" style="height:66px;">
        <span class="title_x el-button--primary fl"></span>
        <p class="title_l fl">现货行情</p>
      </template>
      <el-table
        :data="tableData"
        border
        :header-cell-style="{ background: '#eef1f6', color: '#606266' }"
        highlight-current-row
        @row-click="handleSelectionChange"
      >
        <el-table-column fixed type="index" label="序号" width="55"> </el-table-column>
        <el-table-column prop="name" label="商品" sortable></el-table-column>
        <el-table-column prop="offer" label="报价" sortable></el-table-column>
        <el-table-column
          prop="newest_date"
          label="日期"
          sortable
        ></el-table-column>
        <el-table-column
          prop="band"
          label="产地或品牌"
          sortable
        ></el-table-column>
        <el-table-column prop="model" label="规格" sortable></el-table-column>
        <el-table-column
          prop="trader"
          label="报价方"
          sortable
        ></el-table-column>
      </el-table>
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="searchData.page"
        :page-size="searchData.pageSize"
        layout="total, prev, pager, next"
        :total="searchData.totalPage"
        style="margin-top:15px"
      >
      </el-pagination>
    </el-card>
    <!-- 现货历史弹框 -->
    <el-dialog
      :visible.sync="getA"
      v-if="getA"
      :append-to-body="true"
      :title="
        multipleSelection.name + ' / ' + multipleSelection.model + ' 历史行情'
      "
    >
      <el-card shadow="never" class="d2-mb">
        <div class="inner">
          <div id="cash_commodity_main" style="width:100%;height:400px;"></div>
        </div>
      </el-card>
      <span slot="footer" class="dialog-footer">
        <el-button
          type="primary"
          @click="closeBtn"
          size="mini"
          style="margin-left:92%"
          >导出</el-button
        >
      </span>
    </el-dialog>
  </d2-container>
</template>

<script>
import { quotSpot } from "@/api/url_info.js";
export default {
  //现货行情
  name: "cash_commodity",
  components: {},
  data() {
    return {
      searchData: {
        page: 1, //当前页
        pageSize: 20,
        totalPage: 0,
        name: "",
        start_pub_date: "",
        end_pub_date: "",
        band: "",
        trader: ""
      },
      getA: false,
      row: null,
      selectNameList: [],
      selectBandList: [],
      selectTraderList: [],
      multipleSelection: [],
      tableData: []
    };
  },
  created() {
    this.handle_name();
    this.search();
  },
  methods: {
    // 查询商品
    handle_name() {
      quotSpot({ type: "name" })
        .then(res => {
          this.selectNameList = [];
          var data1 = res.result;
          for (var i = 0; i < data1.length; i++) {
            this.selectNameList[i] = {
              name: data1[i]["name"]
            };
          }
        })
        .catch(err => {
          this.$message.error(err.msg);
        });
    },
    // 查询产地品牌
    handle_band() {
      let params = {
        type: "band",
        name: this.searchData.name
      };
      quotSpot(params)
        .then(res => {
          this.selectBandList = [];
          var data1 = res.result;
          for (var i = 0; i < data1.length; i++) {
            this.selectBandList[i] = {
              band: data1[i]["band"]
            };
          }
        })
        .catch(err => {
          this.$message.error(err.msg);
        });
    },
    // 查询报价方
    async handle_trader() {
      let params = {
        type: "trader",
        name: this.searchData.name,
        band: this.searchData.band
      };
      await quotSpot(params)
        .then(res => {
          let selectTraderList = [];
          let data1 = res.result;
          for (var i = 0; i < data1.length; i++) {
            selectTraderList[i] = {
              trader: data1[i]["trader"]
            };
          }
          this.selectTraderList = selectTraderList.filter(item => {
            return item.trader !== "";
          });
        })
        .catch(err => {
          this.$message.error(err.msg);
        });
    },
    // 查询现货行情
    search() {
      this.searchData.page = 1;
      this.multipleSelection.name = "";
      this.multipleSelection.model = "";
      this.multipleSelection.band = "";
      this.multipleSelection.trader;
      this.cashInfo();
    },
    //选中的一行数据
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    // 每页数
    handleSizeChange(val) {
      this.searchData.pageSize = val;
      this.searchData.page = 1;
      this.cashInfo();
    },
    // 当前页
    handleCurrentChange(val) {
      this.searchData.page = val;
      this.cashInfo();
    },
    //网格信息
    cashInfo() {
      let params = {
        type: "now",
        page: this.searchData.page, //当前页
        pageSize: this.searchData.pageSize,
        totalPage: this.searchData.totalPage,
        name: this.searchData.name,
        start_pub_date: this.searchData.start_pub_date,
        end_pub_date: this.searchData.end_pub_date,
        band: this.searchData.band,
        trader: this.searchData.trader
      };
      quotSpot(params)
        .then(res => {
          this.tableData = [];
          let data = res.result.results;
          this.searchData.totalPage = res.result.count;
          for (let i = 0; i < data.length; i++) {
            this.tableData[i] = {
              name: data[i]["name"],
              offer: data[i]["offer"],
              newest_date: data[i]["newest_date"],
              band: data[i]["band"],
              model: data[i]["model"],
              trader: data[i]["trader"]
            };
          }
        })
        .catch(err => {
          this.$message.error(err.msg);
        });
    },
    //查看历史行情
    searchHis() {
      if (this.multipleSelection.name) {
        this.getA = true;
        let params = {
          type: "his",
          name: this.multipleSelection.name,
          model: this.multipleSelection.model,
          band: this.multipleSelection.band,
          trader: this.multipleSelection.trader
        };
        quotSpot(params).then(res => {
          this.$nextTick(() => {
            let date = [],
              price = [],
              data = res.result;
            for (let i = 0; i < data.length; i++) {
              date.push(data[i]["pub_date"]);
              price.push(data[i]["price"]);
            }
            let myChart = this.$echarts.init(document.getElementById("cash_commodity_main"));
            myChart.setOption({
              tooltip: {
                trigger: "axis"
              },
              xAxis: {
                type: "category",
                data: date
              },
              yAxis: {
                max: function(value) {
                  return (value.max + 0.01 * value.min).toFixed(2);
                },
                min: function(value) {
                  return (value.min - 0.01 * value.min).toFixed(2);
                }
              },
              series: [
                {
                  data: price,
                  type: "line",
                  symbol: "none"
                }
              ]
            });
          });
        });
      } else {
        this.$message({
          message: "请选择一条数据",
          type: "warning"
        });
      }
    }
  }
};
</script>
<style></style>
